<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>尚品汇，添加地址</title>
    <link rel="icon" href="./img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/all.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-address.css" />
    <div th:include="common/head :: head"></div>
</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div th:include="common/loginHeader :: loginHeader"></div>

<div class="address-box">
    <!--addressArea-->
    <div class="addressArea">
        <div class="py-container address">
            <div class="addressform">
                <h3>添加新地址</h3>
                <form class="sui-form">
                    <div class="input-prepend">
                        <span class="add-on">收货人姓名</span>
                        <input id="consignee" type="text" v-model="address.consignee" placeholder="请输入收货人姓名" class="span2 input-xfat">
                    </div>
                    <div class="input-prepend">
                        <span class="add-on">联系方式</span>
                        <input id="phoneNum" type="text" v-model="address.phoneNum" placeholder="请输入联系方式" class="span2 input-xfat">
                    </div>
                    <div class="input-prepend">
                        <span class="add-on">详细地址</span>
                        <input id="userAddress" type="text" v-model="address.userAddress" placeholder="请输入详细地址" class="span2 input-xfat">
                    </div>
                    <div class="setting">
                        <label class="checkbox inline">
                            <input type="checkbox" v-model="address.isDefault" true-value="1" false-value="0">
                            默认地址
                        </label>
                    </div>
                    <div class="logined">
                        <a class="sui-btn btn-block btn-xlarge btn-success" href="javascript:" @click="submitAddress()">添&nbsp;&nbsp;加</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机尚品汇</li>
            <li>销售联盟</li>
            <li>尚品汇社区</li>
        </ul>
        <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
        <div class="beian">京ICP备19006430号
        </div>
    </div>
</div>

<!--页面底部END-->
<script src="/js/api/login.js"></script>
<script th:inline="javascript">
    var item = new Vue({
        el: '.addressform',

        data: {
            address: {
                userAddress: '',
                userId: null, // 这里假设userId由后端提供或通过其他方式获取
                consignee: '',
                phoneNum: '',
                isDefault: '0' // 默认不勾中
            }
        },

        created() {
        },

        methods: {
            submitAddress() {
                /*后台就可以使用UserAddress 对象接收*/
                login.addAddress(this.address).then(response => {
                    // debugger
                    if (response.data.code == 200) {
                        alert('地址添加成功')
                        window.location.href = "http://gmall.com/"
                    } else {
                        alert(response.data.data.message)
                    }
                })
            }
        }
    })
</script>
</body>
</html>
